<template>
    <div id="cashflow_download">
        <el-dialog
        title="订单流水导出"
        top="10vh"
        width="20%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-form v-model="form" label-width="80px" label-position="left">
                <el-form-item label= "选择日期:">
                    <el-date-picker
                    size="small"
                    v-model="form.date"
                    type="date"
                    :picker-options="pickerOptions0"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label= "选择商户:">
                    <el-select v-model="form.type" size="small" placeholder="请选择商户">
                        <el-option value="wxpayAPP" label="微信收款账户"></el-option>
                        <el-option value="wxpayJSAPI" label="微信小程序收款账户"></el-option>
                        <el-option value="alipayAPP" label="支付宝收款账户"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="handleSubmit">下 载</el-button>
            </span>

        </el-dialog>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        props: ['isShow'],
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            }
        },
        data() {
            return {
                form: {
                    date: '',
                    type: ''
                },
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6
                    }
                },
            }
        },
        methods: {
            handleClose() {
                this.$confirm('确定关闭此窗口？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch()
            },
            handlePickerOptions() {

            },
            handleSubmit() {
                try {
                    if(this.form.date == '') {
                        this.$message.warning('请选择下载日期')
                    }else if(this.form.type == '') {
                        this.$message.warning('请选择商户')
                    }else {
                        const loading = this.$loading({
                            lock: true,
                            text: '订单下载中....',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        var server= axios.create({
                            headers: {
                                sessionId: sessionStorage.getItem('sessionId')
                            }
                        })
                        var params= {
                            date: this.formate(new Date(this.form.date).getTime(), 'yyyy-MM-dd'),
                            type: this.form.type,
                        }
                        if(this.form.type == 'alipayAPP') {
                            server.get(process.env.BASE_API + '/youbao/finance/api/finance-payment/transaction/export', {params}).then(res => {
                                if(res.data) { 
                                    let link = document.createElement('a');
                                　　 link.href = res.data;
                                　　 document.body.appendChild(link);
                                　　 link.click(); //点击下载
                                　　 document.body.removeChild(link); //下载完成移除元素
                                    this.$emit('cancelShow', false) 
                                }else{
                                    this.$alert('所选日期未产生订单', '提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            
                                        }
                                    });
                                }
                                loading.close()
                                this.$emit('cancelShow', false)
                            }).catch(err => {
                                loading.close()
                            })
                        }else{
                            let filename= this.form.type == 'wxpayAPP' ? 'APP订单' : this.form.type == 'wxpayJSAPI' ? '小程序订单' : this.form.type == 'alipayAPP' ? '支付宝订单' : '未知类型'
                            server.responseType= 'blob'  
                            server.get(process.env.BASE_API + '/youbao/finance/api/finance-payment/transaction/export', {params}).then(res => {
                                if(res.data) {
                                    var blob = new Blob(["\ufeff"+res.data], {type: 'text/csv,charset=UTF-8'}); 
                                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                                        window.navigator.msSaveOrOpenBlob(blob, this.formate(new Date(this.form.date).getTime(), 'yyyy-MM-dd') + '-' +filename +'.csv');
                                    } else {
                                        var downloadElement = document.createElement('a');
                                    　　 var href = window.URL.createObjectURL(blob); //创建下载的链接
                                    　　 downloadElement.href = href;
                                        downloadElement.download= this.formate(new Date(this.form.date).getTime(), 'yyyy-MM-dd') + '-' +filename +'.csv'; 
                                    　　 document.body.appendChild(downloadElement);
                                    　　 downloadElement.click(); //点击下载
                                    　　 document.body.removeChild(downloadElement); //下载完成移除元素
                                    　　 window.URL.revokeObjectURL(href); //释放掉blo 
                                    }
                                }else{
                                    this.$alert('所选日期未产生订单', '提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            
                                        }
                                    });
                                }
                                loading.close()
                                this.$emit('cancelShow', false)
                            }).catch(err => {
                                loading.close()
                            })
                        }
                    }
                }catch(err) {this.$paramsError(err)}
            }
        }
    }
</script>